<template>
    <div>
        <page-header :title="$route.meta.title" content="" />
        <page-main>
            <el-button style="margin-bottom: 10px;" type="primary" icon="el-icon-plus" @click="onCreate">新增</el-button>
            <el-table :data="listData" border stripe style="width: 100%;" :default-sort="{ prop: 'date', order: 'descending' }">
                <el-table-column prop="id" label="序号" width="50" align="center" />
                <el-table-column label="标题">
                    <template slot-scope="scope">
                        <div>{{ scope.row.title }}</div>
                        <div style="font-size: 12px; color: #999;">{{ scope.row.description }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="weigh" label="跳转方式" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.jump_type === 1">无跳转</div>
                        <div v-if="scope.row.jump_type === 2">直播</div>
                        <div v-if="scope.row.jump_type === 3">商品</div>
                    </template>
                </el-table-column>
                <el-table-column prop="weigh" label="权重" align="center" />
                <el-table-column prop="created_at" label="创建时间" align="center" />
                <el-table-column label="封图" align="center">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.image" :preview-src-list="[scope.row.image]" style="width: 75px; height: 35px;" fit="contain" />
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="onChangeStatus(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="onEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" plain @click="onDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </page-main>
        <FormDialog :id="detailFormDialog.id" :visible.sync="detailFormDialog.visible" :view="formView" @success="getDataList" />
    </div>
</template>

<script>
import mixin from '@/mixins/mixin'
import FormDialog from './components/FormDialog/index'
export default {
    components: {
        FormDialog
    },
    mixins: [mixin],
    data() {
        return {
            dialogMode: false,
            pageRouter: {
                create: 'bannerAdd',
                edit: 'bannerEdit'
            },
            form: {
                username: '',
                nickname: '',
                mobile: ''
            },
            api: {
                list: 'banner/banner/tabulation',
                del: 'banner/banner/delete',
                changeStatus: 'banner/banner/change-status'
            }
        }
    },
    created() {
        this.getDataList()
    }
}
</script>

<style lang="scss" scoped>
    .el-pagination {
        margin-top: 20px;
    }
</style>
